@()
@main("Browse-CBGD") {
	<style>
			.form-group {
				margin-bottom: 5px;
			}
			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}
	</style>
	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Browse</h2>
		</div>
	</div>
	<label>Select the columns to display:</label>
	<div id="checkbox" class="checkbox">

	</div>
	<div id="toolbar">
			&nbsp;Keyword：
	</div>

	<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
	data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	style="table-layout: fixed;word-wrap: break-word"
	>
		<thead>
			<tr>
				<th data-field="geneId" data-sortable="true">Gene ID</th>
				<th data-field="chr" data-sortable="true">Chr</th>
				<th data-field="start" data-sortable="true">Start</th>
				<th data-field="end" data-sortable="true">End</th>
				<th data-field="dir" data-sortable="true">Dir</th>
				<th data-field="kegg" data-sortable="true">KEGG</th>
				<th data-field="ipr" data-sortable="true">Ipr</th>
				<th data-field="interPro" data-sortable="true">Inter Pro</th>
				<th data-field="goPlant" data-sortable="true">Go Planet</th>
				<th data-field="keggPlant" data-sortable="true">KEGG Planet</th>
				<th data-field="nrId" data-sortable="true">Nr ID</th>
			</tr>
		</thead>
	</table>
	<div id="charts" align="center"></div>
	<script>
		function setColumns(value) {
			var element=$("input:checkbox[value="+value+"]")
			if (element.is(":checked")){
				$('#table').bootstrapTable('showColumn', value);
			}else{
				$('#table').bootstrapTable('hideColumn', value);
			}
		}

			$(document).ready(function () {

				var array = ["Chr", "Start", "End", "Dir", "KEGG", "Ipr", "Inter Pro", "Go Planet",
					"KEGG Planet", "Nr ID"]
				var values=["chr","start","end","dir","kegg","ipr", "interPro",
					"goPlant","keggPlant", "nrId"]
				var html=""
				$.each(array, function (n, value) {
							html += "<label style='margin-right: 15px'>"+
									"<input type='checkbox' checked='checked' value='"+values[n]+"' onclick=\"setColumns('"+values[n]+"')\">"+value+
									"</label>"
						}
				);
				$("#checkbox").append(html)
				$("#charts").html("<img src='/assets/images/loading.gif'/>")
				$.ajax({
					url: "@routes.GenomeBrowseController.getAllBgAnnos()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$("#charts").html("")
						$('#table').bootstrapTable({
							data: data
						});
						var hiddenArray=["kegg","ipr", "interPro",
							"goPlant","keggPlant", "nrId"]
						$.each(hiddenArray, function (n, value) {
							$('#table').bootstrapTable('hideColumn', value);
							$("input:checkbox[value="+value+"]").attr("checked",false)
								}
						);
					}
				})
			})
		


	</script>


}